<template>


        <div class="super_container">

				<myheader></myheader>
                <!-- Home -->
            
								
								<!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll" ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">order_info</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li>Your order_info</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Cart -->

	<div class="cart_section">
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="cart_container">


					

							<!-- Cart Buttons -->
							<div class="cart_buttons d-flex flex-row align-items-start justify-content-start">
								<div class="cart_buttons_inner ml-auto d-flex flex-row align-items-start justify-content-start flex-wrap">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="section_container cart_extra_container" style="margin-top:0px;">
			<div class="container">
				<div class="row">
					<!-- Shipping & Delivery -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_1">
							<div class="cart_extra_content cart_extra_coupon">
								<div class="cart_extra_title">订单详情</div>
								<div class="coupon_form_container">
									
								</div>
								<div class="shipping">
									<div class="cart_extra_title">ORDER INFO</div>
									<ul>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_1" name="shipping_radio" class="shipping_radio">
												<span class="radio_mark"></span>
												<span class="radio_text">order_detail</span>
											</label>
											<div class="shipping_price ml-auto">{{ datalist['name'] }}</div>
										</li>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_2" name="shipping_radio" class="shipping_radio">
												<span class="radio_mark"></span>
												<span class="radio_text">order_num</span>
											</label>
											<div class="shipping_price ml-auto">{{ datalist['num'] }}</div>
										</li>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_3" name="shipping_radio" class="shipping_radio" checked>
												<span class="radio_mark"></span>
												<span class="radio_text">order_price</span>
											</label>
											<div class="shipping_price ml-auto">{{ price }}</div>
										</li>
										<li>
											<div class="checkout_button trans_200"><a>{{ mess }}</a></div>
										</li>
										<li>
											<div class="checkout_button trans_200"><a @click="refund()">{{ mes }}</a></div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					
				</div>
			</div>
		</div>
		<!-- 评论区 -->
		<div class='tinymce' style="width:800px; margin-left:50px;">
			<h2>购物闲暇之余,别忘记评论哦！！</h2>
			<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
			<div class="checkout_button trans_200" style="width:300px; margin-left:200px;"><a @click="comments()">{{ comm }}</a></div>
			<div v-html='tinymceHtml'></div>
  		</div>
	</div>
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
        import Cookies from 'js-cookie'
		import tinymce from 'tinymce/tinymce'
		import 'tinymce/themes/silver/theme'
		import Editor from '@tinymce/tinymce-vue'
		import 'tinymce/plugins/image'
		import 'tinymce/plugins/link'
		import 'tinymce/plugins/code'
		import 'tinymce/plugins/table'
		import 'tinymce/plugins/lists'
		import 'tinymce/plugins/contextmenu'
		import 'tinymce/plugins/wordcount'
		import 'tinymce/plugins/colorpicker'
		import 'tinymce/plugins/textcolor'
      export default {
        data () {
          return {
            msg: "这是一个变量",
			datalist:[],
			price:'',
			mes:'去退款',
			mess:'支付成功',
			comm:'发表评论',
            clicked:0,
            upath: '',
			result: '',
			uping:0,
			tinymceHtml: '请输入内容',
			init: {
			language_url: '/static/tinymce/langs/zh_CN.js',
			language: 'zh_CN',
			skin_url: '/static/skins/ui/oxide',
			height: 300,
			plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
			toolbar:
			'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
			branding: false
			}
          }
        },
        components: {
        'myheader':myheader,
		'myfooter':myfooter,
		Editor
        },
        mounted:function(){
            
			this.common.get_menu();
			this.get_comments()
			tinymce.init({})

			let ordernumber = this.$route.query.ordernumber
			if (ordernumber){
				let url =  this.base_url + '/get_orderdetail'
				let _this = this
				let data = {
					'ordernumber':ordernumber
				}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result){
					console.log(result.data.message)
					_this.datalist = result.data.message
					_this.price =_this.datalist['price'] * _this.datalist['num']
				})
			}else{
				this.$router.push('/')
			}
        },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			refund:function(){
				let url =  this.base_url + '/refund'
				let _this = this
				let data = {
					'out_trade_id':_this.$route.query.ordernumber,
					'token':localStorage.getItem('token'),
					'username':Cookies.get('username')
				}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result){
					if (result.data.code == 200){
						_this.mes = '已退款'
						_this.mess = '未支付'
						console.log(result.data.message)
					}else{
						console.log(result.data.message)
					}
				})
			},
			comments:function(){
				console.log(this.tinymceHtml)
				let url =  this.base_url + '/ocomments'
				let _this = this
				let data = {
					'out_trade_id':_this.$route.query.ordernumber,
					'tinymceHtml':this.tinymceHtml,
					'user_id':Cookies.get('user_id'),
					'cartlist':Cookies.get('cart'),
				}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result){
					if (result.data.code == 200){
						console.log(result.data.message)
					}else{
						console.log(result.data.message)
					}
				})
			}
			
      }
      
	  }
      </script>
       
      <style>
			
			@import '../assets/styles/cart.css';
			@import '../assets/styles/cart_responsive.css';
      
      </style>